<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数学必修第一册 - 教材详情</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        neutral: '#64748B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .breadcrumb-arrow {
                @apply text-gray-400 mx-2;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-0 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-2"></i>
                    <span>睿途题库</span>
                </h1>
            </div>

            <div class="hidden md:flex items-center space-x-6">
                <!-- 控制面板 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-tachometer mr-1"></i> 控制面板
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-dashboard mr-2"></i> 仪表盘
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-line mr-2"></i> 数据概览
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-tasks mr-2"></i> 任务管理
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 教材管理 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                        <i class="fa fa-book mr-1"></i> 教材管理
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-list mr-2"></i> 版本管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-sitemap mr-2"></i> 章节管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                <i class="fa fa-exchange mr-2"></i> 版本对比
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 题库管理 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-database mr-1"></i> 题库管理
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-question-circle mr-2"></i> 题目管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-tags mr-2"></i> 标签管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-filter mr-2"></i> 筛选规则
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-upload mr-2"></i> 批量导入
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 组卷系统 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-files-o mr-1"></i> 组卷系统
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-magic mr-2"></i> 智能组卷
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-edit mr-2"></i> 手动组卷
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-copy mr-2"></i> 试卷模板
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-history mr-2"></i> 历史试卷
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 数据分析 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-bar-chart mr-1"></i> 数据分析
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-pie mr-2"></i> 学习分析
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-line mr-2"></i> 趋势分析
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-file-text mr-2"></i> 报告生成
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 系统设置 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-cog mr-1"></i> 系统设置
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-users mr-2"></i> 用户管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-shield mr-2"></i> 权限设置
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-database mr-2"></i> 数据备份
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-cogs mr-2"></i> 系统配置
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索教材、章节或知识点..."
                        class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>

                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span
                            class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                        class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-0 py-8">
        <div class="container mx-auto">
            <!-- 面包屑导航 -->
            <div class="mb-6 flex items-center text-sm">
                <a href="#" class="text-gray-500 hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                <a href="#" class="text-gray-500 hover:text-primary">教材管理</a>
                <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                <a href="#" class="text-gray-500 hover:text-primary">教材列表</a>
                <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                <span class="text-primary font-medium">数学必修第一册</span>
            </div>

            <!-- 教材详情卡片 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- 教材封面 -->
                    <div class="lg:col-span-1 p-6">
                        <div class="relative rounded-lg overflow-hidden shadow-lg">
                            <img src="https://picsum.photos/seed/math1/800/600" alt="数学必修第一册封面" class="w-full h-auto">
                            <div class="absolute top-4 right-4 bg-primary text-white text-xs font-bold px-3 py-1.5 rounded">
                                人教版
                            </div>
                        </div>
                        <div class="mt-6 flex space-x-4">
                            <button class="flex-1 bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-medium transition-colors flex items-center justify-center">
                                <i class="fa fa-download mr-2"></i> 下载教材
                            </button>
                            <button class="w-12 h-12 border border-gray-300 rounded-lg flex items-center justify-center text-gray-600 hover:text-primary hover:border-primary transition-colors">
                                <i class="fa fa-share-alt"></i>
                            </button>
                            <button class="w-12 h-12 border border-gray-300 rounded-lg flex items-center justify-center text-gray-600 hover:text-primary hover:border-primary transition-colors">
                                <i class="fa fa-star-o"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 教材信息 -->
                    <div class="lg:col-span-2 p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h1 class="text-2xl font-bold text-gray-900">数学必修第一册</h1>
                                <div class="flex items-center mt-2">
                                    <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">
                                        高中
                                    </span>
                                    <span class="text-gray-600 text-sm">
                                        <i class="fa fa-calendar mr-1"></i> 2023年7月第1版
                                    </span>
                                </div>
                            </div>
                            <div class="bg-green-100 text-green-800 text-xs font-medium px-3 py-1 rounded">
                                <i class="fa fa-check-circle mr-1"></i> 最新版本
                            </div>
                        </div>
                        
                        <div class="flex items-center text-sm text-gray-600 mb-6">
                            <div class="flex items-center mr-6">
                                <i class="fa fa-users mr-1"></i>
                                <span>25,342人正在使用</span>
                            </div>
                            <div class="flex items-center mr-6">
                                <i class="fa fa-file-text-o mr-1"></i>
                                <span>12个章节</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-lightbulb-o mr-1"></i>
                                <span>238个知识点</span>
                            </div>
                        </div>
                        
                        <div class="border-t border-b border-gray-100 py-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">教材简介</h3>
                            <p class="text-gray-600 mb-4">
                                本书是高中数学必修课程的第一册，涵盖集合与常用逻辑用语、一元二次函数、方程和不等式等内容，是高中数学的基础教材。本书注重培养学生的数学思维能力和应用能力，通过大量实例和练习，帮助学生掌握数学基础知识和基本技能。
                            </p>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="flex items-center">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    <span class="text-gray-600">符合最新课程标准</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    <span class="text-gray-600">配套习题丰富</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    <span class="text-gray-600">知识点讲解详细</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-check-circle text-secondary mr-2"></i>
                                    <span class="text-gray-600">包含多媒体资源</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">适用人群</h3>
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-circle text-xs text-primary mr-2"></i>
                                        <span>高一年级学生</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-circle text-xs text-primary mr-2"></i>
                                        <span>高中数学教师</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-circle text-xs text-primary mr-2"></i>
                                        <span>高中数学教研员</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-circle text-xs text-primary mr-2"></i>
                                        <span>高考备考学生</span>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">教材目录</h3>
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-bookmark-o text-primary mr-2"></i>
                                        <span>第一章 集合与常用逻辑用语</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-bookmark-o text-primary mr-2"></i>
                                        <span>第二章 一元二次函数、方程和不等式</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-bookmark-o text-primary mr-2"></i>
                                        <span>第三章 函数的概念与性质</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-bookmark-o text-primary mr-2"></i>
                                        <span>第四章 指数函数与对数函数</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-ellipsis-h text-gray-400 mr-2"></i>
                                        <span>更多章节...</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="flex flex-wrap gap-3">
                            <h3 class="text-lg font-semibold text-gray-900 mr-4">标签:</h3>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-3 py-1 rounded-full">
                                高中数学
                            </span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-3 py-1 rounded-full">
                                必修课程
                            </span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-3 py-1 rounded-full">
                                人教版
                            </span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-3 py-1 rounded-full">
                                数学教材
                            </span>
                            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-3 py-1 rounded-full">
                                基础课程
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 章节列表 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-gray-900">章节列表</h2>
                    <div class="flex items-center">
                        <div class="relative mr-4">
                            <input type="text" placeholder="搜索章节..."
                                class="pl-8 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 w-48">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <div class="flex items-center">
                            <label class="text-gray-700 mr-2">排序:</label>
                            <select class="border border-gray-300 rounded-lg px-3 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50">
                                <option value="order">章节顺序</option>
                                <option value="name">名称排序</option>
                                <option value="difficulty">难度排序</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="space-y-3">
                    <!-- 章节 1 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter1')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    1
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第一章 集合与常用逻辑用语</h3>
                                    <p class="text-sm text-gray-500 mt-1">1.1 集合的含义与表示 · 1.2 集合间的基本关系 · 1.3 集合的基本运算</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 32个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约12课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter1-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter1-content">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解集合的含义，掌握集合的表示方法</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解集合间的包含与相等关系，能识别给定集合的子集</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解两个集合的并集与交集的含义，会求两个简单集合的并集与交集</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：集合的含义与表示、集合间的基本关系、集合的基本运算</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：对集合中元素的性质的理解、描述法表示集合、补集的概念</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>1.1 集合的含义与表示 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>1.2 集合间的基本关系 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>1.3 集合的基本运算 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 2 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter2')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    2
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第二章 一元二次函数、方程和不等式</h3>
                                    <p class="text-sm text-gray-500 mt-1">2.1 等式性质与不等式性质 · 2.2 基本不等式 · 2.3 二次函数与一元二次方程、不等式</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 28个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约10课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter2-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter2-content">
                            <!-- 章节2内容，与章节1类似 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>掌握等式的性质和不等式的性质</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解基本不等式，会用基本不等式解决简单的最大（小）值问题</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解二次函数、一元二次方程与一元二次不等式之间的关系</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：不等式的性质、基本不等式、一元二次不等式的解法</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：不等式性质的应用、基本不等式的应用、一元二次不等式的实际应用</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>2.1 等式性质与不等式性质 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>2.2 基本不等式 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>2.3 二次函数与一元二次方程、不等式 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 3 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter3')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    3
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第三章 函数的概念与性质</h3>
                                    <p class="text-sm text-gray-500 mt-1">3.1 函数的概念及其表示 · 3.2 函数的基本性质 · 3.3 幂函数</p>
                                </div>
                            </div>
                            <div class="flex>






                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 4 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter4')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    4
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第四章 指数函数与对数函数</h3>
                                    <p class="text-sm text-gray-500 mt-1">4.1 指数 · 4.2 指数函数 · 4.3 对数 · 4.4 对数函数</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 56个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约16课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter4-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter4-content">
                            <!-- 章节4内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解有理指数幂的含义，掌握幂的运算</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解指数函数的概念和意义，掌握指数函数的单调性与特殊点</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解对数的概念及其运算性质，知道用换底公式能将一般对数转化成自然对数或常用对数</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：指数函数、对数函数的概念、图象和性质</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：指数函数与对数函数的关系、利用指数函数和对数函数的性质解决实际问题</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>4.1 指数 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>4.2 指数函数 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>4.3 对数 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 5 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter5')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    5
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第五章 三角函数</h3>
                                    <p class="text-sm text-gray-500 mt-1">5.1 任意角和弧度制 · 5.2 三角函数的概念 · 5.3 诱导公式 · 5.4 三角函数的图象与性质 · 5.5 三角恒等变换</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 68个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约20课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter5-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter5-content">
                            <!-- 章节5内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解任意角的概念和弧度制，能进行弧度与角度的互化</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解任意角三角函数（正弦、余弦、正切）的定义</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>能画出y=sin x, y=cos x, y=tan x的图象，了解三角函数的周期性</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：三角函数的概念、图象和性质，三角恒等变换</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：弧度制的概念，三角函数的图象和性质的应用，三角恒等变换的公式推导</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>5.1 任意角和弧度制 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>5.2 三角函数的概念 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>5.3 诱导公式 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 6 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter6')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    6
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第六章 统计</h3>
                                    <p class="text-sm text-gray-500 mt-1">6.1 随机抽样 · 6.2 用样本估计总体 · 6.3 统计图表</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 42个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约14课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter6-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter6-content">
                            <!-- 章节6内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解随机抽样的必要性和重要性</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>会用简单随机抽样方法从总体中抽取样本；了解分层抽样和系统抽样方法</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解分布的意义和作用，会列频率分布表，会画频率分布直方图、频率折线图、茎叶图，理解它们各自的特点</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：随机抽样的方法，用样本的频率分布估计总体分布，用样本的数字特征估计总体的数字特征</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：分层抽样的应用，样本频率分布直方图的理解与应用，样本数字特征的计算与应用</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>6.1 随机抽样 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>6.2 用样本估计总体 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>6.3 统计图表 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 7 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter7')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    7
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第七章 概率</h3>
                                    <p class="text-sm text-gray-500 mt-1">7.1 随机事件的概率 · 7.2 古典概型 · 7.3 几何概型</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 36个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约12课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter7-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter7-content">
                            <!-- 章节7内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解随机事件发生的不确定性和频率的稳定性，了解概率的意义，了解频率与概率的区别</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解古典概型及其概率计算公式，会用列举法计算一些随机事件所含的基本事件数及事件发生的概率</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解随机数的意义，能运用模拟方法估计概率，了解几何概型的意义</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：概率的意义，古典概型的概率计算，几何概型的概率计算</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：概率与频率的关系，古典概型的判断，几何概型的应用</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>7.1 随机事件的概率 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>7.2 古典概型 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>7.3 几何概型 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 8 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter8')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    8
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第八章 立体几何初步</h3>
                                    <p class="text-sm text-gray-500 mt-1">8.1 空间几何体的结构 · 8.2 空间几何体的三视图和直观图 · 8.3 空间几何体的表面积与体积 · 8.4 点、直线、平面之间的位置关系</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 54个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约18课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter8-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter8-content">
                            <!-- 章节8内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>认识柱、锥、台、球及其简单组合体的结构特征，并能运用这些特征描述现实生活中简单物体的结构</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>能画出简单空间图形（长方体、球、圆柱、圆锥、棱柱等的简易组合）的三视图，能识别上述的三视图所表示的立体模型，会用斜二测法画出它们的直观图</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解空间点、直线、平面的位置关系，理解空间直线、平面位置关系的定义</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：空间几何体的结构特征，三视图和直观图，表面积和体积的计算，空间点、线、面的位置关系</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：空间几何体的表面积和体积公式的推导，空间想象能力的培养，空间点、线、面位置关系的判定与证明</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>8.1 空间几何体的结构 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>8.2 空间几何体的三视图和直观图 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>8.3 空间几何体的表面积与体积 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 9 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter9')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    9
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第九章 平面解析几何初步</h3>
                                    <p class="text-sm text-gray-500 mt-1">9.1 直线与方程 · 9.2 圆与方程 · 9.3 空间直角坐标系</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 48个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约16课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter9-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter9-content">
                            <!-- 章节9内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>在平面直角坐标系中，结合具体图形，探索确定直线位置的几何要素</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解直线的倾斜角和斜率的概念，经历用代数方法刻画直线斜率的过程，掌握过两点的直线斜率的计算公式</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>掌握确定圆的几何要素，掌握圆的标准方程与一般方程</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：直线的斜率和倾斜角，直线的方程，圆的方程，直线与圆、圆与圆的位置关系</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：直线方程的应用，用代数方法处理几何问题的思想，空间直角坐标系的应用</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>9.1 直线与方程 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>9.2 圆与方程 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>9.3 空间直角坐标系 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 10 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter10')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    10
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第十章 复数</h3>
                                    <p class="text-sm text-gray-500 mt-1">10.1 复数的概念 · 10.2 复数的四则运算 · 10.3 复数的几何意义</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 24个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约8课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter10-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter10-content">
                            <!-- 章节10内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解引进复数的必要性，理解复数的基本概念，掌握复数相等的充要条件</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解复数的代数表示法及其几何意义，能进行复数代数形式的四则运算</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解复数代数形式的加、减运算的几何意义</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：复数的概念，复数的四则运算，复数的几何意义</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：复数概念的理解，复数四则运算的法则，复数几何意义的应用</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>10.1 复数的概念 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>10.2 复数的四则运算 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>10.3 复数的几何意义 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 11 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter11')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    11
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第十一章 常用逻辑用语</h3>
                                    <p class="text-sm text-gray-500 mt-1">11.1 命题及其关系 · 11.2 充分条件与必要条件 · 11.3 全称量词与存在量词</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 28个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约10课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter11-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter11-content">
                            <!-- 章节11内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解命题的概念，会判断命题的真假</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解充分条件、必要条件与充要条件的意义，能判断充分条件、必要条件与充要条件</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>理解全称量词与存在量词的意义，能正确地对含有一个量词的命题进行否定</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：命题的概念，充分条件、必要条件与充要条件的判断，全称量词与存在量词的意义</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：命题的否定，充分条件、必要条件与充要条件的应用，全称命题与特称命题的否定</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>11.1 命题及其关系 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>11.2 充分条件与必要条件 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>11.3 全称量词与存在量词 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 章节 12 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" onclick="toggleChapter('chapter12')">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                    12
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">第十二章 导数及其应用</h3>
                                    <p class="text-sm text-gray-500 mt-1">12.1 导数的概念及其几何意义 · 12.2 导数的运算 · 12.3 导数在研究函数中的应用 · 12.4 生活中的优化问题举例</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-lightbulb-o mr-1"></i> 42个知识点
                                </span>
                                <span class="text-sm text-gray-500 mr-4">
                                    <i class="fa fa-clock-o mr-1"></i> 约14课时
                                </span>
                                <button class="text-gray-500 hover:text-primary transition-colors" id="chapter12-btn">
                                    <i class="fa fa-angle-down text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="hidden p-4 border-t border-gray-200 bg-white" id="chapter12-content">
                            <!-- 章节12内容 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">学习目标</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>了解导数概念的实际背景，理解导数的几何意义</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>能根据导数定义求函数y=c，y=x，y=x²，y=x³，y=1/x的导数</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                            <span>能利用给出的基本初等函数的导数公式和导数的四则运算法则求简单函数的导数</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">重点难点</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li class="flex items-start">
                                            <i class="fa fa-star text-yellow-400 mt-1 mr-2"></i>
                                            <span>重点：导数的概念，导数的几何意义，导数的运算，利用导数研究函数的单调性、极值与最值</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-exclamation-circle text-red-400 mt-1 mr-2"></i>
                                            <span>难点：导数概念的理解，导数的综合应用，利用导数解决实际优化问题</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-3">
                                    <h4 class="font-medium text-gray-900 mb-2">相关资源</h4>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-file-text-o text-primary mr-1"></i>
                                        <span>12.1 导数的概念及其几何意义 教学设计</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                                        <i class="fa fa-video-camera text-primary mr-1"></i>
                                        <span>12.2 导数的运算 教学视频</span>
                                    </div>
                                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                                        <i class="fa fa-file-pdf-o text-red-500 mr-1"></i>
                                        <span>12.3 导数在研究函数中的应用 练习题</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                    <i class="fa fa-book mr-1"></i> 查看完整章节
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="mt-8 flex justify-center">
                    <nav class="inline-flex rounded-md shadow-sm" aria-label="Pagination">
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fa fa-chevron-left"></i>
                        </a>
                        <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">1</a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">12</a>
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fa fa-chevron-right"></i>
                        </a>
                    </nav>
                </div>
            </div>
            
            <!-- 相关教材 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-gray-900">相关教材</h2>
                    <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
                        查看更多
                        <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    <!-- 相关教材1 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200 card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/seed/math2/400/300" alt="数学必修第二册" class="w-full h-48 object-cover">
                            <div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                                人教版
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-1">数学必修第二册</h3>
                            <p class="text-sm text-gray-500 mb-3">高中数学必修课程的第二册，涵盖平面向量、复数等内容。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500">
                                    <i class="fa fa-calendar mr-1"></i> 2023年7月第1版
                                </span>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相关教材2 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200 card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/seed/physics1/400/300" alt="物理必修第一册" class="w-full h-48 object-cover">
                            <div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                                人教版
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-1">物理必修第一册</h3>
                            <p class="text-sm text-gray-500 mb-3">高中物理必修课程的第一册，涵盖运动的描述、匀变速直线运动等内容。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500">
                                    <i class="fa fa-calendar mr-1"></i> 2023年7月第1版
                                </span>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相关教材3 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200 card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/seed/chemistry1/400/300" alt="化学必修第一册" class="w-full h-48 object-cover">
                            <div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                                人教版
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-1">化学必修第一册</h3>
                            <p class="text-sm text-gray-500 mb-3">高中化学必修课程的第一册，涵盖物质及其变化、海水中的重要元素等内容。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500">
                                    <i class="fa fa-calendar mr-1"></i> 2023年7月第1版
                                </span>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相关教材4 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200 card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/seed/biology1/400/300" alt="生物必修第一册" class="w-full h-48 object-cover">
                            <div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                                人教版
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-1">生物必修第一册</h3>
                            <p class="text-sm text-gray-500 mb-3">高中生物必修课程的第一册，涵盖细胞的分子组成、细胞的结构等内容。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500">
                                    <i class="fa fa-calendar mr-1"></i> 2023年7月第1版
                                </span>
                                <button class="text-primary hover:text-primary/80 text-sm font-medium">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论区 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-gray-900">用户评论</h2>
                    <div class="flex items-center">
                        <div class="flex items-center mr-4">
                            <span class="text-sm text-gray-700 mr-2">排序:</span>
                            <select class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50">
                                <option value="newest">最新</option>
                                <option value="hottest">最热</option>
                                <option value="rating">评分</option>
                            </select>
                        </div>
                        <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center">
                            <i class="fa fa-pencil mr-2"></i> 发表评论
                        </button>
                    </div>
                </div>
                
                <!-- 平均评分 -->
                <div class="flex flex-col md:flex-row md:items-center p-4 bg-gray-50 rounded-lg mb-6">
                    <div class="text-center md:text-left mb-4 md:mb-0 md:mr-8">
                        <div class="text-4xl font-bold text-gray-900">4.8</div>
                        <div class="flex items-center justify-center md:justify-start mt-1">
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star-half-o text-yellow-400"></i>
                        </div>
                        <div class="text-sm text-gray-500 mt-1">基于 245 条评论</div>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="text-sm text-gray-600 w-12">5 星</span>
                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                <div class="bg-yellow-400 h-2 rounded-full" style="width: 85%"></div>
                            </div>
                            <span class="text-sm text-gray-600 w-8 text-right">85%</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <span class="text-sm text-gray-600 w-12">4 星</span>
                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                <div class="bg-yellow-400 h-2 rounded-full" style="width: 12%"></div>
                            </div>
                            <span class="text-sm text-gray-600 w-8 text-right">12%</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <span class="text-sm text-gray-600 w-12">3 星</span>
                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                <div class="bg-yellow-400 h-2 rounded-full" style="width: 2%"></div>
                            </div>
                            <span class="text-sm text-gray-600 w-8 text-right">2%</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <span class="text-sm text-gray-600 w-12">2 星</span>
                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                <div class="bg-yellow-400 h-2 rounded-full" style="width: 1%"></div>
                            </div>
                            <span class="text-sm text-gray-600 w-8 text-right">1%</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600 w-12">1 星</span>
                            <div class="flex-1 mx-2 bg-gray-200 rounded-full h-2">
                                <div class="bg-yellow-400 h-2 rounded-full" style="width: 0%"></div>
                            </div>
                            <span class="text-sm text-gray-600 w-8 text-right">0%</span>
                        </div>
                    </div>
                </div>
                
                <!-- 评论列表 -->
                <div class="space-y-6">
                    <!-- 评论1 -->
                    <div class="border-b border-gray-100 pb-6">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/id/1001/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h4 class="font-medium text-gray-900">李同学</h4>
                                        <div class="flex items-center mt-1">
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                        </div>
                                    </div>
                                    <span class="text-sm text-gray-500">2023-09-15</span>
                                </div>
                                <p class="mt-2 text-gray-700">这本书内容非常详细，讲解清晰，每个知识点都配有大量的例题和习题，非常适合高中学生自学。特别是函数和三角函数这两章，对我的帮助很大。</p>
                                <div class="mt-3 flex items-center text-sm text-gray-500">
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="fa fa-thumbs-up mr-1"></i> 有用 (42)
                                    </button>
                                    <span class="mx-2">|</span>
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="fa fa-comment-o mr-1"></i> 回复
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评论2 -->
                    <div class="border-b border-gray-100 pb-6">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/id/1002/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h4 class="font-medium text-gray-900">王老师</h4>
                                        <div class="flex items-center mt-1">
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star-half-o text-yellow-400"></i>
                                        </div>
                                    </div>
                                    <span class="text-sm text-gray-500">2023-09-10</span>
                                </div>
                                <p class="mt-2 text-gray-700">作为一名高中数学教师，我认为这本书的编排非常合理，知识点循序渐进，难度适中。配套的练习题也很有针对性，能够帮助学生巩固所学知识。唯一的不足是有些例题的解法可以更加多样化。</p>
                                <div class="mt-3 flex items-center text-sm text-gray-500">
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="fa fa-thumbs-up mr-1"></i> 有用 (35)
                                    </button>
                                    <span class="mx-2">|</span>
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="fa fa-comment-o mr-1"></i> 回复
                                    </button>
                                </div>
                                
                                <!-- 回复 -->
                                <div class="mt-4 ml-6 p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-start">
                                        <img src="https://picsum.photos/id/1003/32/32" alt="作者头像" class="w-8 h-8 rounded-full object-cover mr-2">
                                        <div>
                                            <div class="flex items-center">
                                                <h5 class="font-medium text-gray-900 text-sm">教材编写组</h5>
                                                <span class="ml-2 bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">官方</span>
                                            </div>
                                            <p class="mt-1 text-gray-700 text-sm">感谢您的建议！我们会在下一版中考虑增加例题的解法多样性，以满足不同学生的学习需求。</p>
                                            <span class="text-xs text-gray-500 mt-1 block">2023-09-12</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评论3 -->
                    <div class="border-b border-gray-100 pb-6">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/id/1004/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h4 class="font-medium text-gray-900">张同学</h4>
                                        <div class="flex items-center mt-1">
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star-o text-yellow-400"></i>
                                        </div>
                                    </div>
                                    <span class="text-sm text-gray-500">2023-09-05</span>
                                </div>
                                <p class="mt-2 text-gray-700">这本书对我备战高考帮助很大，尤其是导数和立体几何部分，讲解非常详细。配套的在线资源也很丰富，有很多视频讲解和练习题。唯一遗憾的是没有详细的答案解析。</p>
                                <div class="mt-3 flex items-center text-sm text-gray-500">
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="fa fa-thumbs-up mr-1"></i> 有用 (28)
                                    </button>
                                    <span class="mx-2">|</span>
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="fa fa-comment-o mr-1"></i> 回复
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评论4 -->
                    <div>
                        <div class="flex items-start">
                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h4 class="font-medium text-gray-900">赵同学</h4>
                                        <div class="flex items-center mt-1">
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                            <i class="fa fa-star text-yellow-400"></i>
                                        </div>
                                    </div>
                                    <span class="text-sm text-gray-500">2023-09-01</span>
                                </div>
                                <p class="mt-2 text-gray-700">我是一名高二学生，这本书的内容非常适合我的学习进度。每个章节都有详细的知识点讲解和例题分析，课后习题也很有针对性。我特别喜欢书中的"思考与探究"部分，能够启发我的思维。</p>
                                <div class="mt-3 flex items-center text-sm text-gray-500">
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="">





                                        <i class="fa fa-thumbs-up mr-1"></i> 有用 (24)
                                    </button>
                                    <span class="mx-2">|</span>
                                    <button class="flex items-center hover:text-primary transition-colors">
                                        <i class="fa fa-comment-o mr-1"></i> 回复
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多评论 -->
                <div class="mt-8 text-center">
                    <button class="border border-gray-300 bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                        加载更多评论
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 右侧边栏 -->
        <div class="hidden lg:block lg:w-80 lg:ml-8">
            <!-- 书籍信息卡片 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <div class="relative">
                    <img src="https://picsum.photos/seed/math1/400/500" alt="数学必修第一册封面" class="w-full h-72 object-cover rounded-lg mb-4">
                    <div class="absolute top-4 right-4 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                        人教版
                    </div>
                </div>
                <h2 class="text-xl font-bold text-gray-900 mb-2">数学必修第一册</h2>
                <div class="flex items-center mb-3">
                    <div class="flex">
                        <i class="fa fa-star text-yellow-400"></i>
                        <i class="fa fa-star text-yellow-400"></i>
                        <i class="fa fa-star text-yellow-400"></i>
                        <i class="fa fa-star text-yellow-400"></i>
                        <i class="fa fa-star-half-o text-yellow-400"></i>
                    </div>
                    <span class="text-sm text-gray-500 ml-2">4.8 (245条评价)</span>
                </div>
                <p class="text-gray-700 mb-4">本书是高中数学必修课程的第一册，内容涵盖集合与常用逻辑用语、一元二次函数、方程和不等式、函数的概念与性质、指数函数与对数函数、三角函数等内容。</p>
                
                <div class="space-y-3 mb-6">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">出版社</span>
                        <span class="font-medium text-gray-900">人民教育出版社</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">出版日期</span>
                        <span class="font-medium text-gray-900">2023年7月</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">ISBN</span>
                        <span class="font-medium text-gray-900">978-7-107-36635-2</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">页数</span>
                        <span class="font-medium text-gray-900">288页</span>
                    </div>
                </div>
                
                <div class="flex space-x-3">
                    <button class="flex-1 bg-primary hover:bg-primary/90 text-white px-4 py-3 rounded-lg text-sm font-medium transition-colors flex items-center justify-center">
                        <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                    </button>
                    <button class="w-12 h-12 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 hover:bg-gray-50 transition-colors">
                        <i class="fa fa-heart-o"></i>
                    </button>
                </div>
            </div>
            
            <!-- 目录 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4">章节导航</h2>
                <div class="space-y-3">
                    <a href="#" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                1
                            </div>
                            <div>
                                <h3 class="font-medium text-gray-900">第一章 集合与常用逻辑用语</h3>
                                <p class="text-sm text-gray-500 mt-1">1.1 集合的含义与表示 · 1.2 集合间的基本关系 · 1.3 集合的基本运算 · 1.4 充分条件与必要条件 · 1.5 全称量词与存在量词</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                2
                            </div>
                            <div>
                                <h3 class="font-medium text-gray-900">第二章 一元二次函数、方程和不等式</h3>
                                <p class="text-sm text-gray-500 mt-1">2.1 等式性质与不等式性质 · 2.2 基本不等式 · 2.3 二次函数与一元二次方程、不等式</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                3
                            </div>
                            <div>
                                <h3 class="font-medium text-gray-900">第三章 函数的概念与性质</h3>
                                <p class="text-sm text-gray-500 mt-1">3.1 函数的概念及其表示 · 3.2 函数的基本性质 · 3.3 幂函数 · 3.4 函数的应用（一）</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                4
                            </div>
                            <div>
                                <h3 class="font-medium text-gray-900">第四章 指数函数与对数函数</h3>
                                <p class="text-sm text-gray-500 mt-1">4.1 指数 · 4.2 指数函数 · 4.3 对数 · 4.4 对数函数</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium mr-3">
                                5
                            </div>
                            <div>
                                <h3 class="font-medium text-gray-900">第五章 三角函数</h3>
                                <p class="text-sm text-gray-500 mt-1">5.1 任意角和弧度制 · 5.2 三角函数的概念 · 5.3 诱导公式 · 5.4 三角函数的图象与性质 · 5.5 三角恒等变换</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors text-primary">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium mr-3">
                                查看全部
                            </div>
                            <div>
                                <h3 class="font-medium">查看全部12章内容</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
            <!-- 推荐资源 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h2 class="text-xl font-bold text-gray-900 mb-4">推荐资源</h2>
                <div class="space-y-4">
                    <a href="#" class="block group">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/seed/mathvideo1/80/60" alt="函数的概念与性质教学视频" class="w-20 h-15 object-cover rounded mr-3">
                            <div>
                                <h3 class="font-medium text-gray-900 group-hover:text-primary transition-colors">函数的概念与性质教学视频</h3>
                                <p class="text-sm text-gray-500 mt-1">35分钟</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block group">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/seed/mathdoc1/80/60" alt="三角函数知识点总结" class="w-20 h-15 object-cover rounded mr-3">
                            <div>
                                <h3 class="font-medium text-gray-900 group-hover:text-primary transition-colors">三角函数知识点总结</h3>
                                <p class="text-sm text-gray-500 mt-1">12页</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block group">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/seed/mathquiz1/80/60" alt="指数函数与对数函数练习题" class="w-20 h-15 object-cover rounded mr-3">
                            <div>
                                <h3 class="font-medium text-gray-900 group-hover:text-primary transition-colors">指数函数与对数函数练习题</h3>
                                <p class="text-sm text-gray-500 mt-1">20道题</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="#" class="block group">
                        <div class="flex items-start">
                            <img src="https://picsum.photos/seed/mathguide1/80/60" alt="高中数学学习方法指导" class="w-20 h-15 object-cover rounded mr-3">
                            <div>
                                <h3 class="font-medium text-gray-900 group-hover:text-primary transition-colors">高中数学学习方法指导</h3>
                                <p class="text-sm text-gray-500 mt-1">18页</p>
                            </div>
                        </div>
                    </a>
                </div>
                
                <a href="#" class="mt-4 inline-block text-primary hover:text-primary/80 font-medium text-sm">
                    查看更多资源
                    <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="bg-gray-900 text-white mt-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-lg font-semibold mb-4">教材资源网</h3>
                <p class="text-gray-400 text-sm">提供优质的中小学教材、教学资源和学习指导，助力学生高效学习。</p>
                <div class="flex space-x-4 mt-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-qq"></i>
                    </a>
                </div>
            </div>
            
            <div>
                <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">快速链接</h4>
                <ul class="space-y-2 text-sm">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">教材中心</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">教学资源</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">学习指导</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                </ul>
            </div>
            
            <div>
                <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">教材分类</h4>
                <ul class="space-y-2 text-sm">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">小学数学</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">初中数学</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">高中数学</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">物理教材</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">化学教材</a></li>
                </ul>
            </div>
            
            <div>
                <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">联系我们</h4>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-start">
                        <i class="fa fa-map-marker mt-1 mr-2 text-gray-400"></i>
                        <span class="text-gray-400">北京市海淀区中关村南大街5号</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-phone mr-2 text-gray-400"></i>
                        <span class="text-gray-400">010-12345678</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-envelope mr-2 text-gray-400"></i>
                        <span class="text-gray-400">contact@example.com</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-400 text-sm">© 2023 教材资源网. 保留所有权利.</p>
            <div class="flex space-x-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">隐私政策</a>
                <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">使用条款</a>
                <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">帮助中心</a>
            </div>
        </div>
    </div>
</footer>

<!-- 返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 opacity-0 invisible">
    <i class="fa fa-angle-up text-xl"></i>
</button>

<script>
    // 章节折叠/展开功能
    function toggleChapter(chapterId) {
        const content = document.getElementById(`${chapterId}-content`);
        const button = document.getElementById(`${chapterId}-btn`);
        
        if (content.classList.contains('hidden')) {
            content.classList.remove('hidden');
            button.innerHTML = '<i class="fa fa-angle-up text-lg"></i>';
        } else {
            content.classList.add('hidden');
            button.innerHTML = '<i class="fa fa-angle-down text-lg"></i>';
        }
    }
    
    // 返回顶部按钮
    window.addEventListener('scroll', function() {
        const backToTopButton = document.getElementById('backToTop');
        if (window.pageYOffset > 300) {
            backToTopButton.classList.remove('opacity-0', 'invisible');
            backToTopButton.classList.add('opacity-100', 'visible');
        } else {
            backToTopButton.classList.remove('opacity-100', 'visible');
            backToTopButton.classList.add('opacity-0', 'invisible');
        }
    });
    
    document.getElementById('backToTop').addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    
    // 卡片悬停效果
    document.querySelectorAll('.card-hover').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.classList.add('shadow-md', 'transform', 'translate-y-[-4px]');
            this.classList.remove('shadow-sm');
        });
        
        card.addEventListener('mouseleave', function() {
            this.classList.remove('shadow-md', 'transform', 'translate-y-[-4px]');
            this.classList.add('shadow-sm');
        });
    });
    
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
        const navbar = document.getElementById('navbar');
        if (window.pageYOffset > 50) {
            navbar.classList.add('bg-white', 'shadow-md');
            navbar.classList.remove('bg-transparent');
        } else {
            navbar.classList.remove('bg-white', 'shadow-md');
            navbar.classList.add('bg-transparent');
        }
    });
    
    // 初始化导航栏状态
    window.addEventListener('load', function() {
        const navbar = document.getElementById('navbar');
        if (window.pageYOffset > 50) {
            navbar.classList.add('bg-white', 'shadow-md');
        } else {
            navbar.classList.add('bg-transparent');
        }
    });
    
    // 移动端菜单切换
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });
</script>
</body>
</html>